<template>
  <div class="home">
    <div>{{$store.state.length}}</div>
    <button @click='queryData(123)'>查询</button>
    <h2>全部图书</h2>
    <ul>
      <li v-for="item in $store.state.list" :key="item.id">
        {{item.title}}
      </li>
    </ul>
    <hr>
    <h2>最喜爱图书</h2>
    <ul>
      <li v-for="item in favoriteList" :key="item.id">
        {{item.title}}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters(['favoriteList'])
  },
  methods: {
    // handleClick () {
    //   this.$store.dispatch('queryData', 111)
    // }
    // 参数是对象
    // ...mapActions({
    //   handleClick: 'queryData'
    // })
    // 参数是数组
    ...mapActions(['queryData'])
  }
}

</script>
<style scoped>
</style>
